<template>
  <q-menu>
    <q-list style="max-width: 310px">
      <q-item class="q-pa-none">
        <div class="flex">
          <div
            @click="
              () => {
                emojiClick(emj);
              }
            "
            class="text-xl cursor-pointer"
            v-for="emj in emojiList[0]?.list"
            :key="emj"
          >
            {{ emj }}
          </div>
        </div>
      </q-item>
    </q-list>
  </q-menu>
</template>

<script setup lang="ts">
import { emojiList } from './emoji';

const emit = defineEmits<{
  emojiClick: [data: string];
}>();

const emojiClick = (emoji: string) => {
  emit('emojiClick', emoji);
};
</script>

<style scoped></style>
